<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商铺登记</title>
  <link rel="shortcut icon" href="商.png" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="component/elementUI/index.css">
  <link rel="stylesheet" href="style/wangeditor.css">
  <link rel="stylesheet" href="style/index.css">
  <style>
    h1,h3{
      text-align: center;
    }
    .sahng{
      width: 100%;
    }
    h3{
      color: cornflowerblue;
    }
    .kap{
      margin: auto;
      width:30%;
    }
    .input{
      width: 200px; 
    }
    .zb{
      float: left;
      margin-top: 10px;
      margin-left: 20px;
    }
    .yb{
      float: left;
      margin-top: 30px;
      margin-left: 40px;
      font-size: 14px;
    }
    .yb span{
      display: block;
      text-align:center;
      /* margin: 5px 150px 10px 0px; */
      font-size: 14px;
    }
    .apply{
      margin-left: 180px;
      width: 200px;
    }
    .yyzz{
      height: 200px;
      width: 150px;
    }
    #app{
      margin-top: 160px;
    }
    .el-dialog__body{
      height: 100px;
    };
    .el-dialog__footer{
      height: 200px;
      float: left;
    }
    .el-result{
      margin-top: -50px;
      margin-left: 92px;
      width: 200px;
    }
    .el-result__title p{
      font-size: 14px;
    }
    .tongq{
      margin-right: 4px;
      width: 200px;
    }
    .buz{
      margin-top: 30px;
      margin-left: 50px;
      /* width: 100%;   */
    }
    .cheng{
      margin-left: -3px;
    }
    .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  </style>
<body>
  <div id="app">
        <div class="sahng">
          <h1>社区营销欢迎你</h1>
          <h3>请登记店铺信息</h3>
        </div>
        <div class="kap">
        <el-tabs type="border-card">
          <el-tab-pane label="注册申请">
        <el-row>
          <div class="zb">
                <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <el-form-item label="店铺名称">
                  <el-input v-model="formLabelAlign.name" class="input"></el-input>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <el-input v-model="formLabelAlign.address" class="input"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                  <el-input v-model="formLabelAlign.pname" class="input"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                  <el-input v-model="formLabelAlign.pon" class="input"></el-input>
                </el-form-item>
              </el-form>
              </div>
          <div class="yb">
                <span>营业执照</span>
                  <el-upload v-if="!imageUrl"
                      action=""      
                      auto-upload="false"
                      list-type="picture-card"
                      :on-change="a">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                <img v-else :src="imageUrl" alt="上传后的" class="yyzz">
            </el-tab-pane>
          </div>

           <el-button type="primary" class="apply" @click="anniu()" v-loading.fullscreen.lock="fullscreenLoading">申请</el-button>
            <el-tab-pane label="手机号登录">
            </el-tab-pane>
          </el-tabs>
        </el-row>
        </el-row>

    
            <div class="buz">
              <el-steps :active="activeStep" ref="stepsRef">
              <el-step title="商铺申请" description="请先进行商铺申请"></el-step>
              <el-step title="等待审核" description="请耐心等待审核"></el-step>
              <el-step title="审核通过" description="恭喜你审核通过了"></el-step>
            </div> 


        <el-dialog
        title="申请通知"
        :visible.sync="waitingDialogVisible"
        width="13%"
        center>
          <el-result class="cheng" icon="success" title="申请成功，请等待平台审核" subTitle="请根据提示进行操作">
          </el-result>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleWaitingClose" class="tongq">确 定</el-button>
        </span>
      </el-dialog>
    
      <el-dialog
      title="审核通知"
      :visible.sync="auditNotificationVisible"
      width="13%"
      center>
        <el-result class="cheng" icon="success" title="恭喜你审核通过了" subTitle="请根据提示进行操作">
        </el-result>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAuditClose" class="tongq">确 定</el-button>
      </span>
    </el-dialog>
      <!-- <el-dialog
        title="审核通知"
        width="13%"
        :visible.sync="auditNotificationVisible"
        center>
          <el-result class="cheng" icon="success" title="恭喜你审核通过了" subTitle="请根据提示进行操作">
          </el-result>
          <span slot="footer" class="dialog-footer"></span>
          <el-button type="primary" @click="handleAuditClose()" class="tongq">确 定</el-button>
          </span>
        </el-dialog> -->

  </div>
  
</body>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script type="text/javascript" src="utils/wangeditor.js"></script>
<script type="text/javascript" src="utils/jquery.min.js"></script>
<script type="text/javascript" src="utils/jquery.cookie.js"></script>
<script type="text/javascript" src="utils/vue.min.js"></script>
<script type="text/javascript" src="utils/vuex.min.js"></script>
<script type="text/javascript" src="component/elementUI/index.js"></script>
<script type="text/javascript" src="component/component.js"></script>
<script type="text/javascript" src="config/config.js"></script>
<script type="text/javascript" src="utils/FileSaver.min.js"></script>
<script type="text/javascript" src="utils/FileSaver.js"></script>
<script type="text/javascript" src="utils/xlsx.full.min.js"></script>
<script type="text/javascript" src="utils/xlsx.core.min.js"></script>
<script type="text/javascript" src="utils/compressor.js"></script>
<script type="text/javascript" src="utils/ID_Validity.js"></script>
<script type="text/javascript" src="utils/utils.js"></script>
<script>

function getQueryObject(url) {
    url = url == null ? window.location.href : url
    const search = url.substring(url.lastIndexOf('?') + 1)
    const obj = {}
    const reg = /([^?&=]+)=([^?&=]*)/g
    search.replace(reg, (rs, $1, $2) => {
      const name = decodeURIComponent($1)
      let val = decodeURIComponent($2)
      val = String(val)
      obj[name] = val
      return rs
    })
    return obj
  }



/**
 * 获取日期 年-月-日 时:分:秒
 * @returns {}
 */
function getYMDHMSDate(oDate) {
    if (oDate != null) {
       var data = new Date(oDate);
    } else {
        var data = new Date();
    }
    let m = data.getMonth() + 1;
    let d = data.getDate();
    let H = data.getHours();
    let M = data.getMinutes();
    let S = data.getSeconds();
    if (m < 10) {
        m = "0" + m
    }
    if (d < 10) {
       d = "0" + d
    }
    if (H < 10) {
        H = "0" + H
    }
    if (M < 10) {
       M = "0" + M
    }
    if (S < 10) {
        S = "0" + S
    }
    return data.getFullYear() + "-" + m + "-" + d + " " + H + ":" + M + ":" + S
}



   var a = new Vue({
    el: '#app',
    data() {
      return{
        waitingDialogVisible: false, // 控制等待审核对话框的显示
        auditNotificationVisible: false, // 控制审核通知对话框的显示
        activeStep: 1,
        fullscreenLoading: false,
        imageUrl: '',
        labelPosition: 'right',
              formLabelAlign: {
                date:'',
                name: '',
                pname: '',
                pon:'',
                address: '',
                shen:''
              } ,
            add:[],
        }
    },
    mounted() {
      getQueryObject()
    },
    methods: {
      anniu(){ 
          this.formLabelAlign.shen = '待审核'
          this.formLabelAlign.date = getYMDHMSDate()
          this.add.push(this.formLabelAlign)
          
          this.fullscreenLoading = true;
          setTimeout(() => {
            this.fullscreenLoading = false;
            this.waitingDialogVisible = true; // 显示等待审核对话框
             // 模拟审核过程（这里用 setTimeout 模拟延时）
             setTimeout(() => {
              this.waitingDialogVisible = false; // 关闭等待审核对话框
              this.showAuditNotification(); // 显示审核通知对话框
            }, 3000); // 假设审核过程需要3秒
 
            // 注意：这里的步骤顺序很重要，先关闭等待对话框，再延时显示审核通知对话框
            // 如果不先关闭等待对话框，审核通知对话框可能会被等待对话框遮挡
          }, 1000); // 假设表单提交需要1秒（这里只是为了模拟，实际情况可能更快或更慢）
 
          this.activeStep = 2; // 更新步骤
  
        $.ajax({
          headers:{
            'Content-Type':'application/x-www-form-urlencoded',
            Accesstoken:'eyJraWQiOiJteS1rZXktaWQiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxNTA0NjAwNjEyMCIsImF1ZCI6ImFwaS5leGFtcGxlLmNvbSIsImlzcyI6ImF1dGguZXhhbXBsZS5jb20iLCJVc2VySW5mbyI6eyJVc2VyTmFtZSI6IjE1MDQ2MDA2MTIwIn0sImV4cCI6MTczMTA0NDUyMSwiaWF0IjoxNzMxMDQwOTIxLCJqdGkiOiJlODA3N2RjNC1kN2M4LTQ2YTUtYTg4NS1iODUxNmUyMTkzMGMifQ.ZyffRcfzz1TyUAnzUPNO949ODwvlG_41KKOSw72yaPhVIb-B6Q7AwZt08DRKca6yP2UIrfyI5G5Zr31-xHNltJdQKaXutv9S_F5Q8e12oOyz5MnUbJ8ZlyH1ohHCJZx4umn9lxIuYu0092cv2PJ0o4qXgq3d9itn8iyOn1IAn6QkqJsZl3g5bzLm2TcXilpBI0t7wDTF4EgYOpjewhG8JkFaQZO0IngU7op7VWtg_czPd_iTUUbwFgxmePpEtd-iGQSe_VYPF3adePmj4dScmeNYauZhO6TOqP6I3gHhXMp_5AdQZgbbvIXrQ6DyJjEKf7P_WjpCugVubSPiNZlVkg',
          },
          url: 'https://service2.ediblefungus.cn/zhaobo/generalBusiness/generalSave',
            type: 'POST',
            data:{   
            Data:JSON.stringify({"Add":{"tableData": this.add}}) ,
          },
          success:(add)=>{
            
          },
          error:(err)=>{          //  失败调用，200交互成功，500服务器出问题了，304权限不够，404不存在，405 get/post请求问题
            console.log(err);
          },
          dataType:'json' //转数据格式  
        })

        .done(() => {
        // 请求成功后，设置 fullscreenLoading 为 false，结束加载
          this.fullscreenLoading = false;

        // 显示弹窗
          this.centerDialogVisible = true;
       })
        .fail(() => {
       // 请求失败时，设置 fullscreenLoading 为 false，结束加载
       this.fullscreenLoading = false;

       // 显示错误提示
      this.$message.error('请求失败，请稍后重试');
      })
    
      
      
      },
      a(e){
        console.log(e.raw);
        // 创建FileReader对象
        var reader = new FileReader();
        // 文件读取成功完成后的处理
        reader.onload = (event)=> {
            // 将Base64字符串打印到控制台
            // console.log(event.target.result);
            this.imageUrl = event.target.result
        };
 
        // 以Base64格式读取文件
        reader.readAsDataURL(e.raw)
      },
      handleWaitingClose() {
          // 这里只是关闭等待审核对话框，不执行其他操作
          // 因为延时显示审核通知对话框的逻辑已经在 anniu 方法中处理了
          this.waitingDialogVisible = false;
        },
      showAuditNotification() {
          // 使用 setTimeout 延时显示审核通知对话框
          setTimeout(() => {
            this.auditNotificationVisible = true;
          }, 5000); // 延时5秒显示审核通知对话框（根据实际情况调整延时时间）
        },
      handleAuditClose() {
            this.auditNotificationVisible = false; // 关闭审核通知对话框
            this.activeStep = 3; // 更新步骤到审核通过
            window.location.href = './成功.html'
          },
      }
})
</script>
</html>